<template>
    <div class="boby_zfm">
        <div id="box">
            <div id="giakuo">
                <div id="yuanzhu"></div>
                <p>签约业绩统计</p>
            </div>
            <div class="changedate">
                <span>选择日期范围</span>
                <el-date-picker
                    v-model="value2"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    style="margin-left:10px"
                >
                </el-date-picker>
            </div>
            <div class="changedate">
                <span id="jg">机构</span>
                <el-select v-model="value" filterable placeholder="请选择" style="margin-left:10px;margin-top: 10px;">
                    <el-option
                    v-for="item in list"
                    :key="item.organization_id"
                    :label="item.organization_name"
                    :value="item.organization_id">
                    </el-option>
                </el-select>
                <span id="ystd_1">医生团队</span>
                <el-select v-model="value3" filterable placeholder="请选择" style="margin-left:10px;">
                    <el-option
                        v-for="item in list2"
                        :key="item.team_id"
                        :label="item.team_name"
                        :value="item.team_id">
                  </el-option>
                </el-select>
                <span id="ystd_1">医生</span>
                <el-select v-model="value4" filterable placeholder="请选择" style="margin-left:10px;">
                    <el-option
                    v-for="item in list3"
                    :key="item.doctor_id"
                    :label="item.doctor_name"
                    :value="item.doctor_id">
                    </el-option>
                </el-select>
                
            </div>
            <div id="echarsthree">
                <p>签约量</p>
                <SignMath></SignMath>
            </div>
            <div>
                <el-button id="btn" :plain="true" @click="open2">导出</el-button>
            </div>
            <div style="margin-top:10px;">
                <el-table
                    :data="tableData"
                    stripe
                    border
                    style="width: 90%;margin-left: 5%;">
                    <el-table-column
                    prop="date"
                    label="日期">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="服务量">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import SignMath from '@/components/Data/SignMath.vue'
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
export default {
    components:{
        SignMath
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: '',
        list:[],
        value:'',
        value3:'',
        list2:[],
        value4:'',
        list3:[],
        tableData: [{
          date: '2022-10-18',
          name: '7',
        }, {
          date: '2022-10-19',
          name: '9',
        }, {
          date: '2022-10-20',
          name: '5',
        }, {
          date: '2022-10-21',
          name: '2',
        },{
          date: '2022-10-22',
          name: '5',
        },{
          date: '2022-10-23',
          name: '4',
        },{
          date: '2022-10-24',
          name: '9',
        },{
          date: '合计',
          name: '41',
        }]
      };
    },
    created(){
        this.option2(),
        this.option3(),
        this.option4()
    },
    methods:{
        option2(){
            axios({
                url:"/sign/getOrganizationList",
                method:"get"
            }).then((res) =>{
                this.list=res.data
            })
        },
        option3(){
            axios({
                url:"/data/getTeamList",
                method:"get"
            }).then((res) =>{
                this.list2=res.data
                console.log(res);
            })
        },
        option4(){
            axios({
                url:"/doctor/getDoctorList",
                method:"get",
            }).then((res) =>{
                this.list3=res.data
            })
        },
        open2() {
        this.$message({
          showClose: true,
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
      },
    }
}
</script>

<style>
    *{
    margin: 0;
    padding: 0;
    }

    .boby_zfm{ 
        background: #F2F7FA;
    }

    #box{
        width: 1150px;
        height: 1150px;
        margin: 20px auto;
        background: rgb(255, 255, 255);
        position: relative;
        font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK';
    }

    #yuanzhu{
        width: 6px;
        height: 20px;
        background-color: #2984F8;
        border-radius: 8px;
        position: absolute;
        top: 20px;
        left: 20px;
    }

    #giakuo{
        font-size: 18px;
        line-height: 60px;
    }

    #giakuo p{
        margin-left: 40px;
    }

    .changedate{
        font-size: 13px;
        color: #999999;
    }

    .changedate span{
        margin-left: 20px;
    }
    #test6{
        width: 335px;
        height: 44px;
        border-radius: 8px;
        border: none;
        background-color: rgba(242, 247, 251, 1);
        font-size: 14px;
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        color: #2984F8;
        text-indent: 20px;
    }

    #test6:focus{
        outline: #2984F8;
        border: 1px solid rgba(24, 119, 242, 1);
    }

    #jg{
        margin-left: 72px;
    }

    #echarsthree{
        width: 800px;
        height: 400px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 12px;
        box-shadow: 0px 0px 10px rgb(41 132 248 / 10%);
        margin-left: 175px;
        margin-top: 50px;
    }

    #echarsthree p{
        line-height: 40px;
        margin-left: 20px;
    }

    #btn{
        box-shadow: 0px 0px 10px rgb(41 132 248 / 10%);
        margin-top: 30px;
        margin-left: 1060px;
    }

</style>